import React, { useEffect, useState } from 'react'
import { Table, Space } from 'antd';
import { getToken } from '../common/util';
import axios from 'axios'
import { axiosConfig, backIP, error, IconFont, success } from '../common/config';
import styles from '../../styles/home/houseShow.scss'
import HouseModalShow from './HouseModalShow';

interface HouseShowConfig {
    addIndex: number | null
    setAddIndex: React.Dispatch<React.SetStateAction<number>>
}

export default function HouseShow({ addIndex, setAddIndex }: HouseShowConfig) {
    const [houseInfo, setHouseInfo] = useState(null)
    const [visible, setVisible] = useState(false)
    const [loading, setLoading] = useState(false)
    const [house_id, setHouseId] = useState(null)
    const [type, setType] = useState('')
    const [name, setName] = useState('')
    const [floorNumber, setFloorNumber] = useState(null)
    useEffect(() => {
        if (addIndex === 1) {
            setVisible(true)
            setType('add')
            setName('')
            setHouseId(null)
            setFloorNumber(null)
        }
    }, [addIndex])
    const deleteHouse = async (house_id: number) => {
        const token: string = getToken()
        const { data: res }: { data: axiosConfig } = await axios({
            url: `${backIP}/house/reduce`,
            data: { house_id },
            method: 'post',
            headers: { Authorization: token }
        });
        if (res.code === 0) {
            getHouseInfo(token)
            success(res.message)
        } else {
            error(res.message)
        }
    }

    const columns = [
        {
            title: '名称',
            dataIndex: 'name',
            key: 'name',
            width: 300,
        },
        {
            title: '楼层数',
            dataIndex: 'floor_number',
            key: 'floor_number',
            width: 300,
        },
        {
            title: '操作',
            key: 'action',
            width: 300,
            render: (text) => (
                <Space size="middle">
                    <IconFont
                        type='iconxiugai07'
                        className={styles.icon}
                        onClick={() => { console.log(text); changeState(text.key, 'modify', text.name, text.floor_number) }}
                    />
                    <IconFont type='iconshanchu' className={styles.icon} onClick={() => { deleteHouse(text.key); }} />
                </Space>
            ),
        },
    ];

    const clear = () => {
        setHouseId(null);
        setType('')
        setName('')
        setFloorNumber(null)
        setAddIndex(null)
    }
    const changeState = (key: number, method: string, name: string, floor_number: number) => {
        setHouseId(key);
        setType(method)
        setName(name)
        setFloorNumber(floor_number)
        setVisible(true)
    }
    const getHouseInfo = async (token: string) => {
        const { data: res }: { data: axiosConfig } = await axios({
            url: `${backIP}/floor`,
            data: {},
            method: 'get',
            headers: { Authorization: token }
        });
        if (res.code === 0) {
            const handleData = res.data.map(item => {
                return {
                    key: item.id,
                    name: item.value,
                    floor_number: item.floor_number,
                }
            })
            setHouseInfo(handleData)
        } else {
            error(res.message)
        }
    }

    useEffect(() => {
        const token: string = getToken();
        getHouseInfo(token)
    }, [])

    return (
        <div style={{
            width: 900
        }}>
            {
                houseInfo
                    ? <Table columns={columns} dataSource={houseInfo} />
                    : <div>暂无数据</div>
            }
            <HouseModalShow
                visible={visible}
                setVisivble={setVisible}
                house_id={house_id}
                type={type}
                name={name}
                floorNumber={floorNumber}
                loading={loading}
                setLoading={setLoading}
                clear={clear}
                getHouseInfo={getHouseInfo}
                setName={setName}
                setFloorNumber={setFloorNumber}
            />
        </div>
    )
}
